<template> 
  <div class="main"   >
        <header>
            <div class="first-header flex-between" v-if="!navigatorValue">
                <img class="logo" src="../../assets/login-logo.png">
                <div class="exchange">
                    <span>Biplus交易所</span>
                    <span>全球领先的数字资产交易平台</span>
                </div>
                <div class="download">
                   <img @click="loadChange()" src="../../assets/action/home-down.png">
                </div>
                <div class="download">
                    <img @click="closeLoad()" src="../../assets/action/home-error.png">
                </div>
            </div>
             <img class="logo" src="../../assets/header-logo.png" v-if="navigatorValue">
        </header>
        <mt-swipe :auto="4000" >
            <mt-swipe-item v-for="(item, i) in bannerList"
            @touchstart.native="sideslip(item, 1)"
            @touchmove.native="sideslip(item, 2)"
            @touchend.native="sideslip(item,3)"
        v-bind:key="i"><img :src="imgUrl+item.fUrlCn"></mt-swipe-item>
        </mt-swipe>
        <main @touchend.native="touchendSideslip(item,3)">
            <Notice class="color-header" ></Notice>
            <section class="markets">
                <dl v-for="(item, i) in data" v-bind:key="i" @click="fnameRouter(item)">
                <dt class="color-header">{{item.fname_sn}}</dt>
                <dd growing-ignore="true" class="close "  v-bind:class="item.fupanddown>= 0?'up':'down'">{{item.lastDealPrize}}</dd>
                <dd growing-ignore="true" class="rate "  v-bind:class="item.fupanddown>= 0?'up':'down'"><span v-if="item.fupanddown>= 0">+</span><span>{{item.fupanddown}}%</span></dd>
                <dd growing-ignore="true" class="rate color-header">￥<span>{{(item.lastDealPrize*okerRatePrice).toFixed(2)}}</span></dd>
            </dl>
            </section>
            <section class="quick-otc ">
                <div class="fastEntry" style="width:100%">
                    <div class=" row warp fill-height">
                        <div class="flex pr-2 xs7">
                            <div class="white pl-3" style="height: 100%; padding-right: 14px !important;">
                                <div class="  fill-height">
                                    <a @click="goToMake()" class="flex-20 flex-all-center column">
                                        <span class="font-weight-bold body-9 no-wrap"><img src="../../assets/home2.png"></span><br> 
                                        <span class="color-header">快捷买币</span>
                                        </a>
                                    <a @click="goToFirst()" class="flex-20 flex-all-center column">
                                        <span class="font-weight-bold body-9 no-wrap"><img style="margin-top:4px" src="../../assets/home1.png"></span><br> 
                                        <span class="color-header">共识生态</span>
                                    </a>
                                    <a  @click="goToAction()"  class="flex-20 flex-all-center column">
                                        <span class="font-weight-bold body-9 no-wrap"><img src="../../assets/home3.png"></span><br> 
                                        <span class="color-header">邀请返佣</span>
                                    </a>
                                    <router-link to="/center" class="flex-20 flex-all-center column">
                                        <span class="font-weight-bold body-9 no-wrap"><img src="../../assets/home4.png"></span><br> 
                                        <span class="color-header">帮助中心</span>
                                    </router-link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </section>
            <router-link to="/center/detail/?id=112" class="logo-border flex-all-center">
                <img src="../../assets/home-content.png">
            </router-link>
            <section class="markets-rate"  :style="{'padding-bottom':isAndroid?'0px':'150px'}">
                <dl  >
                    <dt><span class="color-header rate-up">涨幅榜</span></dt>
                    <dd class="first">
                        <dl>
                            <dt class="upper node-nore color-title">币种<span></span>
                            </dt>
                            <dd growing-ignore="true"></dd>
                        </dl>
                        <dl>
                            <dt growing-ignore="true " class="node-nore color-title">最新成交价</dt>
                            <dd growing-ignore="true"></dd>
                        </dl><em  growing-ignore="true" class="nore color-title">涨幅</em>
                    </dd>
                    <dd class="danger" v-for="(item, i) in coinList" v-bind:key="i" @click="fnameRouter(item)">
                        <dl>
                            <dt class="upper" style="font-size: 28px;">{{item.fShortName}}/<span class="upper-btc"><span style="font-size:26px">{{item.group}}</span></span>
                            </dt>
                        </dl>
                        <dl>
                            <dt style="font-size: 30px;" growing-ignore="true" v-bind:class="item.fupanddown>= 0?'up':'down'">{{item.lastDealPrize}}</dt>
                            <dd growing-ignore="true" >¥{{(item.lastDealPrize*okerRatePrice).toFixed(2)}}</dd>
                        </dl><em  growing-ignore="true" v-bind:class="item.fupanddown>= 0?'up':'down'"><span v-if="item.fupanddown>= 0">+</span><span>{{item.fupanddown}}%</span></em>
                    </dd>
                </dl>
            </section>
        </main>
  </div>
</template>
<script>
  import { Toast, } from 'mint-ui';//导入toast组件
import Notice from '@/components/util/notice'
 import {mapMutations, mapActions} from 'vuex';
  import { Indicator } from 'mint-ui';
  import { MessageBox } from 'mint-ui';
export default {
    components: {Notice},
    props:{
        loginState:''
    },
  name: 'home',
  data () {
    return {
      data:[],
      okerRatePrice:'',
      sessionData:'',
      isLogin:'',
      bannerList:'',
     imgUrl :'https://biplush.oss-ap-southeast-1.aliyuncs.com/',
     timer:false,
     coinList:[],
     isAndroid:false,
     navigatorValue:false,
      allLoaded:false
    }
  },
  mounted() {
      if(this.$store.state.userAgent){
            this.navigatorValue=true;
      }
    if(window.plus) {
         this.plusReady();
    } else {
        document.addEventListener("plusready", this.plusReady, false);
    } 
      this.isLogin=this.loginState;
       var u = navigator.userAgent, app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
        this.isAndroid=true
       //这个是安卓操作系统
        setTimeout(this.appid(),3000);
    }
      this.getCoins();
       this.$http.post('v2/market/okexExchangeRate').then((res)=>{
        this.okerRatePrice = res.data.data.futureTicker.rate;
       })
        this.$http.post('v1/indexArticle',{types:22,size:3}).then((res)=>{
            this.bannerList=res.data.data[22];
       })
  },
        methods:{
              ...mapMutations([
                'USER_AGENT'
            ]),
              toNum(a) {
            //也可以这样写 var c=a.split(/\./);
            var c = a.split('.');
            var num_place = ["", "0", "00", "000", "0000"],
                r = num_place.reverse();
            for(var i = 0; i < c.length; i++) {
                var len = c[i].length;
                c[i] = r[len] + c[i];
            }
            var res = c.join('');
            return res;
        },
         downWgt() {
             let self=this;
        var wgtUrl ="https://www.biplus.vip/upload/html/app/biplus.apk";
        plus.downloader.createDownload(wgtUrl, {
            filename: "_doc/update/"
        }, function(d, status) {    
            if(status == 200) {       
                Indicator.close();    
                self.installWgt(d.filename); //安装wgt包 
            } else {     
                Indicator.close();   
                plus.nativeUI.alert("下载失败！");    
            }    
            plus.nativeUI.closeWaiting();  
        }).start();
        },
        installWgt(path) {  
            plus.nativeUI.showWaiting("安装更新文件...");  
            plus.runtime.install(path, {}, function() {    
                plus.nativeUI.closeWaiting();      
                plus.nativeUI.alert("应用资源更新完成！", function() {      
                    plus.runtime.restart();    
                });  
            }, function(e) {    
                plus.nativeUI.closeWaiting();     
                plus.nativeUI.alert("安装更新文件失败[" + e.code + "]：" + e.message);    
                if(e.code == 10) {    
                    alert('请清除临时目录');    
                }  
            });
        },
             appid(){
                 let self=this;
                 if(window.plus) {
                plus.runtime.getProperty(plus.runtime.appid, function(inf) {
                            var version = inf.version;
                            self.$http.post('v1/version',{version:version,platform:'ANDROID'}).then((res) => {
                        if(res.data.data.status==2||res.data.data.status==1){
                             MessageBox.confirm('有新版本发布，确定更新？').then(action => {
                                   self.downWgt();
                                     Indicator.open({
                                text: '下载中，请稍后...',
                                spinnerType: 'fading-circle'
                                });
                            }).catch(err => { 
                        if (err == 'cancel') {     //取消的回调
                            return ;
                            } 
                        });
                        
                            }
                        })
                    })
                 }
                },
             loadTop(id) {
             this.getCoins();
            },
                plusReady() {
            let self=this;
             setTimeout(plus.navigator.closeSplashscreen(),1000);
                this.navigatorValue=true;
                 this.USER_AGENT({userAgent:true});
            },
         closeLoad(){
               let self=this;
              self.navigatorValue=true;
         },
         loadChange(){
        if (this.isAndroid) {
            this.$router.push("sub/android");
        }else{
        this.$router.push("sub/ios");
        }
         },
            fnameRouter(item){
              this.$router.push({
                    path: '/chart',
                    query: {
                        symbol: item.fid,
                    }
                    })
            },
            sideslip(item,index){
                if(index == 1){ 
                    return
                }
             if(index == 2) {
                 this.timer=true
             }
            if(index == 3){
                if(!this.timer){
                    this.timer=false;
                 this.$router.push({ name: 'centerDetail',query: {id:item.id} });
                }
                this.timer=false;
            }
            },
            goToAction(){
                if(this.$store.state.isLogin==1){
                    this.$router.push("/login");
                    return ;
                }else{
                     this.$router.push("/action");
                }
            },
            goToFirst(){
                   if(this.$store.state.isLogin==1){
                    this.$router.push("/login");
                    return ;
                }else{
                     this.$router.push("/my/make");
                }
            },
           goToMake(){
                if(this.$store.state.isLogin==1){
                    this.$router.push("/login");
                        return ;
                }else{
                   this.$emit('funTo',4);
                   
                }
           },
            actionBtn(){
                if(this.isLogin==1){
                    this.$router.push("/login");
                }else{
                    this.$router.push("/action");
                }
            },
            getCoins() {
                  let searchList=[];
                  let dataMap=[];
            this.$http.post('v2/market/coins').then((res)=>{
               dataMap=  JSON.parse(JSON.stringify(res.data.dataMap));
                  Object.keys( dataMap).forEach(function (searchKey) {
                        for (var i = 0; i < dataMap[searchKey].length; i++) {
                                searchList.push(dataMap[searchKey][i]);
                        }
                })
                this.coinList=JSON.parse(JSON.stringify(searchList));
               this.data=JSON.parse(JSON.stringify(searchList)).splice(0,4);
               this.data= this.data.filter(item=>{
                    return item.fname=='ETH' || item.fname=='BZB' ||item.fname=='BTC'
                })
            })
         },
        }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.border{
    height:15px;
width: 100%;
}
.upper-btc{
    color: #C0C7CF;
    font-size: 32px;
}
.color-title{
    color: #858594;
}
.upper{
    color: #E0E0F9;
    font-size: 38px;
}
.danger .up {
    color: #03ad8f;
}
.danger .down {
    color: #d14b64;
}

.fastEntry .no-wrap{ 
    margin-bottom: 30px;
    height: 60px;
}
.logo-border{
    height: 200px;
    border-top:12px solid #161736;
      border-bottom:12px solid #161736;
      padding-top: 15px;
}
.logo-border img{
    width: 100%;
}
.growing{
   height: 264px;
    margin-top: 20px;
    padding: 0 30px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}
.flex-20{
width: 25%;
}
.node-nore{
      color: #999999;
      font-size:24px;
}
.mint-swipe-items-wrap img{
    width: 100%;
    height: 100%;
}
.nore{
    float: right;
    text-align: center;
    width: 160px;
    height: 66px;
    font-size: 28px;
    line-height: 66px;
    color: #999999;
    margin-top: 12px;
    border-radius: 3px;
}

.mint-swipe{
    height: 260px;
    margin-bottom: 20px;
    background: #161736;
}
.layout.row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.fill-height {
    height: 100%;
    display: flex;
    flex-direction: row;
}
.layout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    min-width: 0;
}

.flex {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    max-width: 100%;
}
.pr-2 {
    padding-right: 8px!important;
}
[data-icon]:before {
    content: attr(data-icon)
}
.white {
    background-color: var(--v-white-base) !important;
    border-color: var(--v-white-base) !important;
}
.column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.pl-3 {
    padding-left: 16px!important;
}
.fill-height {
    height: 100%;
}

.align-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}


.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 750px;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 20px;
    z-index: 1;
   
}

.header-logo {
    margin-top: 35px
}

.header .btn-group {
    position: absolute;
    top: 0;
    right: 20px
}

.header .btn-login,.header .btn-register {
    float: left;
    line-height: 60px;
    padding: 0 20px;
    text-align: center;
    margin-top: 25px;
    margin-left: 20px;
    border: 1px solid #e7ebee;
    font-size: 24px;
    text-shadow: 0 2px 10px rgba(0,0,0,.1)
}

.header .btn-login {
    color: #1882d4
}

.header .user-info {
    position: absolute;
    top: 0;
    right: 20px;
    height: 110px
}

.header .user-info .left {
    float: left;
    margin-right: 20px;
    margin-top: 27px
}

.header .user-info .left .name {
    font-weight: 700
}

.header .user-info .right {
    float: right;
    padding-left: 20px;
    padding-right: 20px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    margin-top: 27px;
    background-color: #f7f7fb
}

header {
     height:108px;
       background:rgba(34,34,64,1);
    line-height: 138px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: center;
    color: #333333;
    font-size:40px;
    margin-bottom: 20px
}

header img {
    margin-left: 30px
}
.color-header{
    color: #E0E0F9
}

.btn-primary {
    width: 100%;
    height: 88px;
    font-size: 32px;
    background: linear-gradient(to bottom right,#6898e6,#1882d4);
    color: #fff;
    font-weight: 700;
    line-height: 88px
}

.btn-primary:disabled {
    background: #c5cfd5
}

input {
    border: none;
    caret-color: #1882d4;
    color: #1f3f59
}

::-webkit-input-placeholder {
    color: #c5cfd5;
    font-size: 32px
}

:-moz-placeholder,::-moz-placeholder {
    color: #c5cfd5;
    font-size: 32px
}

:-ms-input-placeholder {
    color: #c5cfd5;
    font-size: 32px
}

.input-box .input-title {
    height: 44px;
    font-size: 24px;
    line-height: 24px
}

.input-box .input-content {
    height: 124px;
    line-height: 72px;
    color: #1f3f59;
    font-size: 32px;
    font-weight: 700;
    position: relative
}

.input-box .input-action {
    position: absolute;
    right: 0;
    top: 0
}

.input-box input {
    height: 72px;
    width: 100%;
    line-height: 32px;
    font-size: 32px;
    box-sizing: border-box;
    border-bottom: 1px solid;
    border-color: #e7ebee
}

.color-buy,.color-up {
    color: #03ad8f!important
}

.color-down,.color-sell {
    color: #d14b64!important
}

.bg-buy,.bg-up {
    background: #03ad8f
}

.bg-down,.bg-sell {
    background: #d14b64
}

.mini-toastr {
    position: fixed;
    z-index: 9;
    left: calc(50% - 250px);
    top: calc(50% - 44px)
}

.mini-toastr__notification {
    cursor: pointer;
    box-sizing: border-box;
    padding: 20px 28px;
    background-color: rgba(31,63,89,.9);
    color: #fff;
    min-width: 500px;
    max-width: 500px;
    text-align: center
}

.mini-toastr-notification__message {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    font-size: 32px;
    line-height: 48px
}
.main{
    color: #1f3f59;
    background: #161736;
}
.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    line-height: 1;
    text-align: center;
    z-index: 99
}

.page-loading img {
    top: 50%;
    width: 64px
}

.page-loading img,.page-loading p {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%)
}

.page-loading p {
    top: 60%;
    line-height: 1.3;
    opacity: 0;
    transition: opacity .5s ease-in
}
.flex-between{
    display: flex;
justify-content: space-between;
}
.dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.dialog-box {
    width: 550px;
    min-height: 358px;
    background: hsla(0,0%,100%,.9);
    box-shadow: 0 2px 20px rgba(0,0,0,.1)
}

.dialog-title {
    height: 112px;
    line-height: 112px;
    font-size: 32px;
    font-weight: 700;
    text-align: center
}

.dialog-content {
    line-height: 38px;
    padding: 0 40px 40px
}

.dialog-action {
    height: 100px;
    line-height: 100px;
    color: #1882d4;
    text-align: center;
    border-top: 1px solid #e7ebee;
    box-sizing: border-box;
    font-weight: 700
}

.system-tips {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 650px;
    min-height: 636px;
    border-radius: 5px;
    box-shadow: 0 2px 20px rgba(0,0,0,.1);
    background: #f0f6ff url(/image/tips.b412e53.svg) no-repeat;
    background-position: center 50px
}

.system-tips .content {
    margin-top: 380px;
    padding: 40px;
    min-height: 256px;
    font-size: 32px;
    line-height: 48px;
    text-align: center
}

.system-tips .actions {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 650px
}

.system-tips .actions button {
    margin-left: 60px;
    font-weight: 700
}

.system-tips .actions button.primary {
    margin-left: 0;
    color: #1882d4;
    font-size: 32px;
    height: 48px
}

[m-mask] {
    color: transparent;
    overflow: hidden
}

[m-mask] * {
    color: transparent!important;
    background: transparent!important;
    border-color: transparent!important
}

body,html {
    padding: 0;
    margin: 0
}

.page-index {
    background-color: #f8f9fb;
    font-family: Roboto,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,serif
}

.page-index * {
    box-sizing: border-box
}

.page-index.is-login .banner {
    padding: 0;
    height: 326px
}

.page-index.is-login .banner .banner-container {
    position: relative
}

.page-index.is-login .banner .banner-pager {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%)
}

.page-index.is-login .banner .banner-wrap {
    width: 100%;
    height: 100%;
    margin: 0
}

.page-index.is-login .banner .banner-wrap .select-wrap {
    border-radius: 0;
    border: none
}

.page-index.is-login .banner .banner-wrap img {
    width: 100%
}

.page-index.is-login .quick-register {
    display: none
}

.page-index.is-login .user-info,.page-index aside {
    display: -ms-flexbox;
    display: flex
}

.page-index aside {
    -ms-flex-align: center;
    align-items: center;
    height: 130px;
    padding: 0 60px 0 30px;
    background-image: linear-gradient(0deg,#1f2d94 8%,#10174c 76%);
    color: #fff;
    position: relative
}

.page-index aside img {
    width: 80px
}

.page-index aside dl {
    margin-left: 20px;
    -ms-flex: 1;
    flex: 1
}
 .flex-all-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-index aside dl dt {
    font-size: 32px;
    line-height: 46px;
    font-weight: 400
}

.page-index aside dl dd {
    font-size: 24px;
    line-height: 32px
}

.page-index aside button.download {
    min-width: 180px;
    padding: 0 20px;
    height: 70px;
    border-radius: 5px;
    border: 2px solid #fff;
    font-size: 28px;
    color: #fff
}

.page-index aside button.close {
    position: absolute;
    top: 30px;
    right: 0;
    width: 60px;
    height: 70px;
    background: url() no-repeat;
    background-position: 50%
}

.page-index main .banner {
    background-color: #060525;
    height: 338px;
    padding: 30px 60px 0;
    box-shadow: 0 0 0 2px #060525
}

.page-index main .banner .banner-container {
    overflow: hidden;
    height: 100%
}

.page-index main .banner .banner-wrap {
    height: 274px;
    border-radius: 3px;
    display: -ms-flexbox;
    display: flex
}

.page-index main .banner .banner-wrap .swiper-slide {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    border-radius: 3px
}

.page-index main .banner .banner-wrap img {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 630px
}

.page-index main .banner .banner-pager {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 24px;
    margin-top: 20px
}

.page-index main .banner .banner-pager .swiper-pagination-bullet {
    width: 24px;
    height: 4px;
    background-color: hsla(0,0%,100%,.25)
}

.page-index main .banner .banner-pager .swiper-pagination-bullet:first-child {
    border-radius: 2px 0 0 2px
}

.page-index main .banner .banner-pager .swiper-pagination-bullet:last-of-type {
    border-radius: 0 2px 2px 0
}

.page-index main .banner .banner-pager .swiper-pagination-bullet-active {
    border-radius: 2px!important;
}

.page-index main .quick-register {
    background-color: #060525;
    height: 456px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    padding: 30px 60px 0
}

.page-index main .quick-register input {
    width: 100%;
    height: 88px;
    line-height: 1;
    font-size: 28px;
    border-radius: 5px;
    border: none;
    padding: 0 30px;
    box-sizing: border-box;
    font-family: Roboto,serif
}

.page-index main .quick-register input::-webkit-input-placeholder {
    font-size: 28px
}

.page-index main .quick-register input::-moz-placeholder {
    font-size: 28px
}

.page-index main .quick-register input:-ms-input-placeholder {
    font-size: 28px
}

.page-index main .quick-register button {
    width: 100%;
    height: 88px;
    font-weight: 700;
    color: #fff;
    font-size: 32px;
    background-color: #1882d4;
    margin-top: 40px;
    border-radius: 5px
}

.page-index main .quick-register span {
    font-weight: 700;
    min-width: 276px;
    margin-top: 60px;
    height: 80px;
    border-radius: 5px;
    border: 1px solid hsla(0,0%,100%,.25);
    background-color: hsla(0,0%,100%,.06);
    line-height: 80px;
    text-align: center;
    color: #fff;
    padding: 0 20px
}

.page-index main .quick-register span a {
    color: #089bff;
    margin-left: 6px
}

.page-index main .markets {
    width: 750px;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    height: 262px;
    background: #161736;
}

.page-index main .markets dl {
    width: 250px;
    margin-top: 30px;
    text-align: center
}

.page-index main .markets dl dt {
    font-weight: 700;
    margin-top: 20px;
    font-size: 24px
}

.page-index main .markets dl dd {
    margin-top: 20px;
    font-size: 36px
}

.page-index main .markets dl dd.up {
    color: #03ad8f
}
.notice{
    display: flex;
    height:72px;
    background:rgba(34,34,64,1);
}
.page-index main .markets dl dd.down {
    color: #d14b64
}

.page-index main .markets dl dd+dd {
    margin-top: 20px;
    line-height: 32px;
    font-size: 24px
}

.page-index main .quick-otc {
     height:224px;
    padding: 0 30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: center;
    align-content: center;
    background:rgba(34,34,64,1);
}

.page-index main .quick-otc dl {
    position: relative;
    width: 100%;
    margin-bottom: 40px
}

.page-index main .quick-otc dl dt {
    padding-top: 30px;
    font-weight: 700;
    font-size: 36px;
    line-height: 50px
}
.page-index .first-header{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center
}
.page-index .first-header .exchange {
   height: 80px;
   display: flex;
   flex-direction: column;
   width: 50%;
}
.page-index .first-header .exchange span{
    height: 50px;
    line-height: 50px;
    font-size:32px;
    color: rgba(224, 224, 249, 1);
}
.page-index .first-header .exchange span:nth-child(2){
    font-size: 24px;
}
.page-index .first-header .logo{
   width: 80px;
   height: 80px;
}
.page-index main .quick-otc dl dd {
    font-size: 24px;
    line-height: 34px
}

.page-index main .quick-otc dl dd em {
    color: #1882d4;
    vertical-align: inherit;
    margin-left: 8px
}

.page-index main .quick-otc dl dd.order {
    position: absolute;
    top: 64px;
    right: 0;
    color: #8c9fad
}

.page-index main .quick-otc dl dd.order img {
    margin-right: 8px;
    margin-top: -4px
}

.page-index main .quick-otc .select-wrap {
    height: 80px;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    border-radius: 3px;
    line-height: 80px;
    padding: 0 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.page-index main .quick-otc .select-wrap p {
    background: url() no-repeat;
    background-position: 0;
    background-size: 34px;
    padding-left: 46px
}

.page-index main .quick-otc .select-wrap p.eth {
    background-image: url()
}

.page-index main .quick-otc .select-wrap p.usdt {
    background-image: url()
}

.page-index main .quick-otc .select-wrap p.eos {
    background-image: url()
}

.page-index main .quick-otc .select-wrap ul {
    position: absolute;
    top: 78px;
    left: -1px;
    width: calc(100% + 2px);
    background: #fff;
    border: 1px solid #e7ebee;
    display: none
}

.page-index main .quick-otc .select-wrap ul.down {
    display: block
}

.page-index main .quick-otc .select-wrap ul li {
    padding-left: 20px;
    line-height: 80px
}

.page-index main .quick-otc .select-wrap ul li.cur {
    background-color: #f7f7fb
}

.page-index main .quick-otc .select-wrap ul li img {
    width: 34px;
    margin-right: 12px;
    margin-top: -6px
}

.page-index main .quick-otc .select-wrap>img {
    position: absolute;
    top: 34px;
    right: 20px;
    transform: rotate(180deg)
}

.page-index main .quick-otc .select-wrap>img.down {
    transform: rotate(0deg)
}
.page-index .download {
    margin-right: 10px;
}
.page-index .download img{
    margin-left: 0px;
}
.page-index main .quick-otc button {
    min-width: 240px;
    margin-left: 20px;
    height: 80px;
    font-size: 32px;
    padding: 0 20px;
    border-radius: 3px;
    background-image: linear-gradient(-134deg,#2b94e6,#1882d4);
    color: #fff
}

.page-index main .quick-otc button img {
    margin-right: 10px;
    margin-top: -4px;
    vertical-align: inherit
}

.page-index main .markets-rate {
    margin-top: 20px;
    background:rgba(34,34,64,1);
    margin-bottom: 120px;
}

.page-index main .markets-rate>dl>dt {
    font-size: 28px;
    line-height: 100px;
    height: 100px;
    padding-left: 30px;
    border-bottom: 1px solid #161736;
    font-weight: 400
}

.page-index main .markets-rate>dl .danger {
    height: 116px;
    border-bottom: 1px solid #161736;
    padding: 0 30px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    width: 100%;
}

.page-index main .markets-rate>dl .first {
    height: 80px;
    padding: 0 30px;
    white-space: nowrap;
    display: flex;align-items: center
}
.page-index main .markets-rate>dl .first dl dt{
    font-size: 24px;
}
.page-index main .markets-rate>dl>dd dl {
    float: left;
    margin-top: 16px
}
.page-index main .markets-rate>dl>dd dl:nth-child(2) {
   width: 40%;
}
.page-index main .markets-rate>dl>dd dl dt {
    font-size: 30px;
    white-space: nowrap;
}
/* .ignore-none{
      color: #51D6AD;
} */
.page-index main .markets-rate>dl>dd dl dt span {
    line-height: 40px;
}

.page-index main .markets-rate>dl>dd dl dd {
    color: #8c9fad;
    font-size: 24px;
    line-height: 32px
}

.page-index main .markets-rate>dl>dd dl:first-child {
    width: 270px
}
.page-index main .markets-rate>dl .danger em span{
          height: 66px;
          line-height: 66px;
}
.page-index main .markets-rate>dl .danger em {
    float: right;
    text-align: center;
    width: 160px;
    height: 66px;
    font-size: 28px;
    line-height: 58px;
    color: #fff;
    margin-top: 2px;
    border-radius: 3px;
    background-color: #c5cfd5;
    border-radius: 40px;
}
.page-index main .markets-rate>dl .danger>dl:nth-child(2) dt{
    margin-bottom: 18px;
}
.page-index main .markets-rate>dl>dd em.up {
    background:linear-gradient(90deg,rgba(102,183,168,1) 0%,rgba(69,232,176,1) 100%);
   
}

.page-index main .markets-rate>dl>dd em.down {
 background:linear-gradient(90deg,rgba(243,109,125,1) 0%,rgba(243,61,83,1) 100%);
 
}

.page-index footer {
    padding-bottom: 100px
}

@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .page-index footer {
        padding-bottom:134px
    }
}

@media only screen and (device-width: 414px) and (device-height:896px) and (-webkit-device-pixel-ratio:3) {
    .page-index footer {
        padding-bottom:134px
    }
}

@media only screen and (device-width: 414px) and (device-height:896px) and (-webkit-device-pixel-ratio:2) {
    .page-index footer {
        padding-bottom:134px
    }
}

.page-index footer .user-info {
    height: 184px;
    margin: 0 30px;
    border-bottom: 1px solid #e7ebee;
    display: none;
    -ms-flex-align: center;
    align-items: center
}

.page-index footer .user-info dl {
    margin-left: 20px;
    -ms-flex: 1;
    flex: 1
}

.page-index footer .user-info dl dt {
    font-weight: 700;
    font-size: 28px;
    line-height: 38px
}

.page-index footer .user-info dl dd {
    color: #8c9fad;
    line-height: 32px
}

.page-index footer .user-info button {
    min-width: 140px;
    padding: 0 20px;
    height: 60px;
    border-radius: 3px;
    border: 1px solid #c5cfd5;
    font-size: 28px;
    color: #8c9fae
}
.rate-up{
    height: 32px;
    line-height: 32px;
    font-size: 28px;
    padding-left: 8px;
    border-left: 6px solid #1B6BE0;
}
.page-index footer .actions {
    padding: 0 30px;
    height: 120px;
    line-height: 120px;
    padding-top: 40px
}

.page-index footer .actions a {
    float: left;
    margin-right: 60px;
    line-height: 40px;
    color: #8c9fae;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.page-index footer .actions a i {
    margin-right: 10px
}


.page-index .nav {
    box-sizing: content-box
}

</style>
